<template>
  <el-card class="content">
    <template #header>
      <span>审批中心</span>
    </template>
    <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
      <el-tab-pane
        :label="item.label"
        :name="item.name"
        v-for="(item, index) in operationList"
        :key="index"
      >
      </el-tab-pane>
      <component :is="operationList[activeNum].component"></component>
    </el-tabs>
  </el-card>
</template>

<script lang="ts" setup>
import { ref } from "vue";

// 批量导入组件
const modules = import.meta.globEager("./operations/*.vue");
const operationMap = new Map([
  ["Todo", 0],
  // ["Toread", 1],
  ["Done", 1],
  // ["Read", 3],
  ["Self", 2]
]);

let operationList = [
  { name: "Todo", label: "待办", component: "" },
  // { name: "Toread", label: "待阅", component: "" },
  { name: "Done", label: "已办", component: "" },
  // { name: "Read", label: "已阅", component: "" },
  { name: "Self", label: "我的申请", component: "" }
];

// 处理批量导入的组件
const modulesArray = Object.values(modules).map(v => v.default);
modulesArray.forEach(item => {
  if (item.name === "Toread" || item.name === "Read") return;
  operationList[operationMap.get(item.name)].component = item;
});

// 初始状态
let activeName = ref<string>("Todo");
let activeNum = ref<number>(0);

// 切换状态
const handleClick = tab => {
  activeName.value = tab.paneName;
  activeNum.value = operationMap.get(tab.paneName);
};
</script>

<style lang="scss" scoped></style>
